<template>
    <div class="page-container">
        <div class="grid-container">
            <a-row type="flex" class="grid-table-tool">
                <a-col :span="10" :order="1" class="tool-action">
                    <a-input-search placeholder="请输入关键词,例如:手机号" v-model="params.key" @search="onSearch" style="width:300px;">
                        <a-button icon="search" type="primary" slot="enterButton">筛选</a-button>
                    </a-input-search>
                </a-col>
                <a-col :span="14" :order="2" class="tool-pagination">
<!--                    <a-button type="primary" icon="plus" @click="onAdd()">新增</a-button>-->
                </a-col>
            </a-row>
            <a-table bordered :columns="columns"  :dataSource="dataList" :pagination="false" :loading="loading" :rowKey="record => record.id" size="middle">
                <template  slot="index"  slot-scope="text,record,index">
                    {{index+1}}
                </template>
                <template slot="amount" slot-scope="text,record">
                    {{fmMoney(record.consumptionAmount,2,true)}}
                </template>
                <template slot="createAt" slot-scope="createAt">
                    {{parseTime(createAt,'yyyy-MM-dd HH:mm:ss')}}
                </template>
                <template slot="operation" slot-scope="text,record">
                    <a @click="onShow(record)"  class="ant-btn-text"><a-icon type="search" /></a>
                    <a-divider type="vertical" />
                    <a @click="onDeleted(record.id)"  class="ant-btn-text"><a-icon type="delete" /></a>
                </template>
            </a-table>
            <a-row type="flex" class="grid-table-tool">
                <a-col :span="12" :order="1" class="tool-action"></a-col>
                <a-col :span="12" :order="2" class="tool-pagination" v-if="total > params.pageSize">
                    <a-pagination  :total="total"  @change="onChange" :current="params.current" :showTotal="total => `共 ${total} 条`" :pageSize="params.pageSize" :defaultCurrent="1"/>
                </a-col>
            </a-row>
        </div>
        <a-drawer title="会员详情" :width="720" @close="onClose"
            :visible="visible"
            :wrapStyle="{height: 'calc(100% - 108px)',overflow: 'auto',paddingBottom: '108px'}"
        >
            <vip-detail :model="model" v-if="visible"></vip-detail>
        </a-drawer>
    </div>
</template>
<script>
    import {findMemberList,deletedMember} from "../../api/member";
    import {fmMoney,parseTime} from "../../utils";
    import {VipDetail} from "./components";

    const columns = [
        {title: '序号', dataIndex: 'index',width: 60,align:'center',scopedSlots: { customRender: 'index' }},
        {title: '姓名',dataIndex: 'name',align:'left'},
        {title: '联系电话',dataIndex: 'phone',align:'center',width:130,scopedSlots: { customRender: 'phone' }},
        {title: '生日',dataIndex: 'birthday',align:'center',width:130},
        {title: '消费金额',dataIndex: 'saleAmount',align:'center', width:150,scopedSlots: { customRender: 'amount' }},
        {title: '注册时间',dataIndex: 'createAt',width: 170,align:'center',scopedSlots: { customRender: 'createAt' }},
        {title: '操作',key: 'operation',align:'center',width: 100,scopedSlots: { customRender: 'operation' }}];
    export default {
        components:{VipDetail},
        data() {
            return {
                columns,
                dataList: [],
                params:{
                    key:'',
                    current:1,
                    pageSize:10,
                    sorter:{
                        field:'',
                        order:'',
                    },
                },
                total:0,
                loading:false,
                visible:false,
                model:null
            }
        },
        methods: {
            fmMoney,
            parseTime,
            onClose(){
                this.visible = false
            },
            onSearch(){
                this.params.current = 1;
                this.onLoad();
            },
            onChange(current){
                this.params.current = current;
                this.onLoad();
            },
            onShow(item){
                this.model = item;
                this.visible = true;
            },
            //删除
            onDeleted(id){
                let _this = this;
                this.$confirm({
                    title: '确认删除该会员信息吗?',
                    okText: '确认',
                    okType: 'danger',
                    cancelText: '取消',
                    onOk() {_this.handleDelete(id);},
                    onCancel() {},
                });
            },
            async handleDelete(id){
                let resp = await deletedMember(id);
                if(this.qUtil.validResp(resp)) {
                    this.$success({title:'删除成功!',okText:'确定'});
                    this.onLoad();
                }else{
                    this.$error({title:'删除失败!',okText:'确定'});
                }
            },
            async onLoad(){
                this.loading = true;
                let resp = await findMemberList(this.params);
                this.loading = false;
                if(!this.qUtil.validResp(resp)) return false;
                this.total = resp.data.total;
                this.dataList = resp.data.dataList;
                console.log("===>resp==user",resp.data.dataList);
            }
        },
        mounted(){
            this.onLoad();
        }
    }
</script>
<style>

</style>
